<template lang="pug">
el-dialog(:title="role.id?'编辑分类':'添加分类'" :visible="value" width="500px" @close="onClose")
  el-form(:model="form")
    el-form-item(label="分类名称" label-width="100px")
      el-input(v-model="form.name" placeholder="请输入分类名称")
    el-form-item(label="分类标签" label-width="100px")
      el-radio-group(v-model="form.tag")
        el-radio(label="HOT") HOT
        el-radio(label="新品") 新品
        el-radio(label="折扣") 折扣
    el-form-item(label="分类描述" label-width="100px")
      el-input(v-model="form.desc" placeholder="请输入分类描述")
  div(slot="footer" class="dialog-footer")
    el-button(@click="onClose") 取 消
    el-button(type="primary" v-if="role.id" @click="onEdit") 保 存
    el-button(type="primary" v-else @click="onYes") 确 定
  </div>
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    },
    role:{
      type: Object,
      default:() => ({})
    }
  },
  data() {
    return {
      form:{
        name:"",
        tag:"",
        desc:""
      }
    }
  },
  watch: {
    role(v) {
      this.form = {
        name:v.name,
        tag:v.tag,
        desc:v.desc
      }
    }
  },
  methods: {
    onClose() {
      this.form = {
        name:"",
        tag:"",
        desc:""
      }
      this.$emit("input", false)
    },
    onYes() {
      this.axios.post('/category/add',{...this.form}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.onClose()
          this.$emit('yes')
        }
      })
    },
    onEdit() {
      this.axios.post('/category/edit',{id:this.role.id,...this.form}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.onClose()
          this.$emit('edit')
        }
      })
    }
  },
}
</script>

